import React, { useEffect, useRef, useState } from 'react'
import './Message.scss'
import { Search } from '@react-vant/icons';
import Chat from './component/chat/Chat';
import { useNavigate } from 'react-router-dom'
import { getConversation } from '../../utils/request'


export default function Message() {
    let navigate = useNavigate()
    const [conv, setConv] = useState([])
    // 获取到用户ID
    let userId = localStorage.getItem('userId')


    // 获取会话列表
    useEffect(() => {
        // 获取聊天室的信息
        if (userId) {
            getConversation(userId).then((res) => {
                setConv(res)
            })
        }
    }, [userId])

    return (
        <div className='message'>
            <div className='top'>
                <h2>消息</h2>
                <div>
                    <Search fontSize='23px' />
                </div>
            </div>
            <div className="message_count">
                {
                    conv?.map((item) => {
                        return <Chat obj={item} key={item._id} convId={item._id}></Chat>
                    })
                }
            </div>
        </div>
    )
}
